<template>
  <el-dialog
    width="500px"
    title="确认收货"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
  >
    <div
      class="warn-box"
      style="padding:10px"
    >
      <svg-icon
        style="margin-right:10px"
        icon-class="warn"
        :size="20"
      />
      <p style="color:#000000;line-height:23px">收货凭证图片可做法律依据，添加后不可进行删除，请谨慎操作。点击查看<a
        href="https://zuxiaoqi-file.oss-cn-beijing.aliyuncs.com/pdf/%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9.pdf"
        class="blue-font"
      >注意事项</a>，点击下载<el-button type="text" @click="getSignReceipt">用户签收凭证</el-button>
        <!-- <a
                href="https://image-xxz.oss-cn-beijing.aliyuncs.com/download/%E6%9C%AC%E4%BA%BA%E7%AD%BE%E6%94%B6%E5%87%AD%E8%AF%81%E6%A0%B7%E5%BC%8F%E8%A1%A8.doc"
                class="blue-font"
              >用户签收凭证</a> -->
      </p>
    </div>
    <el-form
      ref="ruleForm"
      :rules="rules"
      :model="form"
      label-width="100px"
    >
      <el-form-item>
        <p>您确定要确认用户收货吗？</p>
      </el-form-item>
      <el-form-item label="订单编号">
        <el-input
          v-model="form.orderId"
          disabled
        />
      </el-form-item>
      <el-form-item label="用户收货凭证" prop="images">
        <crop-upload
          ref="cropUpload"
          :multiple="true"
          show-type="photo"
          :init-val="form.images"
          wrapper-width="100px"
          wrapper-height="100px"
          :photo-width="100"
          :photo-height="100"
          @setVal="imgChange"
        />
      </el-form-item>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        size="small"
        @click="dialogVisible = false"
      >取 消</el-button>
      <el-button
        :loading="isLoading"
        size="small"
        type="primary"
        @click="submit"
      >确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { confirmGoods, getSignReceipt } from '@/api/order'
import cropUpload from '@/components/cropUpload'
export default {
  components: { cropUpload },
  props: ['orderId'],
  data() {
    return {
      form: {
        orderId: '',
        images: []
      },
      dialogVisible: false,
      rules: {
        // images: [
        //   { required: true, message: '请上传用户收货凭证', trigger: 'change' }
        // ]
      },
      isLoading: false
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.isLoading = false
        this.form.orderId = this.orderId
        this.form.images = []
      }
    }
  },
  methods: {
    // 下载签收回单
    getSignReceipt(order_id) {
      getSignReceipt({ order_id: this.orderId }).then(res => {
        const a = document.createElement('a')
        a.href = window.location.origin + res.pdf

        a.download = '签售回执.pdf'
        a.click()
      })
    },
    imgChange(val, type) {
      if (type === 'del') {
        this.form.images.splice(val, 1)
      } else {
        this.form.images.push(val)
      }
      this.$refs.cropUpload.sortList = this.form.images
    },
    submit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          const params = { ...this.form }
          params.images = params.images.join(',')
          this.isLoading = true
          confirmGoods(params).then(res => {
            this.dialogVisible = false
            this.$emit('getList', true)
          })
        } else {
          this.$message({
            message: '请检查表单错误',
            type: 'error'
          })
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
a,
a:focus,
a:hover {
  color: $mainBlue;
}
</style>
